<template>
	<view>
		<uni-search-bar style="background-color: #fff;flex: 1;" @confirm="getDataList" v-model="keyword"
			@clear="getDataList"></uni-search-bar>
		<view class="content">
			<view class="merchant" v-for="item in 3" :key="item" @click="toInfoPage(item)">
				<view class="bank">
					北京银行
				</view>
				<view class="flexBox">
					<view class="">
						日期：2023-07-13
					</view>
					<view class="">
						金额：￥10000.00
					</view>
				</view>
				<view class="">
					商户：汇佳上第摩码幼儿园
				</view>
				<view class="flexBox">
					<view class="">
						提现金额：￥10000.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: ''
			}
		},
		methods: {
			toInfoPage() {}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		.pay {
			color: #333;
			font-weight: bold;
			font-size: 16px;
			background: rgba(255, 255, 255, .3);
			margin: 10px;
			border-radius: 5px;
			padding: 5px 10px;
		}

		.flexBox {
			view {
				flex: 1;
			}
		}

		.merchant {
			background-color: rgba(255, 255, 255, .9);
			border-radius: 10px;
			box-shadow: 1px 1px 5px #ccc;
			box-sizing: border-box;
			padding: 20rpx;
			margin: 10px;

			.bank {
				font-weight: bold;
			}

			.iconBox {
				color: #5cabfd;
				text-align: right;
			}
		}
	}
</style>